<template>
  <view :class="[horizontal ? 'signPageHeng' : 'signPageZong','signPage']">
    <view @click="changeHorizontal" :class="[horizontal ? 'signTitleHeng' : 'signTitle']">
      签名
    </view>
    <view class="signView">
      <SpSignBoard style="width: 90%; height: 100%;" :horizontal="horizontal" bgColor="#FFF" ref="signBoardRef"
                     :showMark="false"/>
    </view>
    <view :class="[horizontal ? 'signPosition' : 'signPositionZong']">
      <view style="display: flex; align-items: center; flex-direction: row;">
        <u-button @click="onBackPage"
                  :customStyle="{width: '220rpx', height: '80rpx', borderRadius: '16rpx', fontSize: '14px', marginRight: '40rpx'}"
                  type="primary" :plain="true" color="#37B874" text="取消"></u-button>
        <u-button @click="onSubmit"
                  :customStyle="{width: '220rpx', height: '80rpx', borderRadius: '16rpx', fontSize: '14px'}"
                  type="primary" color="#37B874" text="确认"></u-button>
      </view>
    </view>
  </view>
</template>

<script>
import SpSignBoard from "../sp-sign-board/sp-sign-board.vue";
export default {
  name: 'SignPage',
  components: {SpSignBoard},
  props: {
    // 是否横屏
    horizontal: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isRequesting: false,
    }
  },
  methods: {
    onBackPage() {
      this.$emit('onCancle');
    },
    changeHorizontal() {
      // 横屏
      this.$emit('onChangeHorizontal', !this.horizontal)
    },
    onSubmit() {
      if (this.isRequesting) {
        return;
      }
      this.isRequesting = true;
      this.$refs.signBoardRef
      this.$refs.signBoardRef.confirm().then(res => {
        this.getSignImg(res);
      }).catch(err => {
        console.log("err",err)
        this.isRequesting = false
      })
    },
    async getSignImg(data) {
      if (data.base64) {
        this.$emit('ongetSignData', data.base64)
        this.isRequesting = false;
      } else {
        this.isRequesting = false;
      }
    },
  }
}
</script>

<style lang="scss">
.signPage {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: relative;

  &.signPageHeng {
    padding: 44rpx 98rpx 44rpx 130rpx;
  }

  &.signPageZong {
    padding: 98rpx 44rpx 130rpx;
  }

  .signTitle {
    width: 100%;
    height: 98rpx;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    font-weight: 500;
  }

  .signTitleHeng {
    width: 100%;
    height: 98rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    font-weight: 500;
    position: absolute;
    top: 50%;
    right: -50%;
    transform: rotate(90deg) translate(0%, 50%);
  }

  .signView {
    width:  calc( 100% - 2px );
    height: calc( 100% - 2px );
    border: 1px solid #C9C9C9;
    border-radius: 18rpx;
    position: relative;
  }

  .signPosition {
    position: absolute;
    transform: rotate(90deg);
    left: -25%;
    top: 50%;
  }

  .signPositionZong {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 30rpx;
  }

  .signTip {
    height: 80rpx;
    line-height: 80rpx;
    font-family: PingFang SC;
    font-size: 32rpx;
    font-weight: 400;
    color: #999;
    top: 150rpx;
  }
}

// .sign-page .vertical-btns .data-v-bdc5c85c{
// 	right:30rpx !important;
// }
</style>